<template>
  <div class="print-boxbody">
    <div class="weekCheck-box" id="printMe">
      <div class="weekCheck-box-title">
        <span>{{ schoolName }}</span>
        单位每周食品安全排查治理报告
      </div>
      <div class="weekCheck-box-table">
        <div class="weekCheck-table-tr header-line-tr">
          <div class="weekCheck-table-td">
            <span class="title-name">
              收件人：
            </span>
            <span class="title-value">
              {{ addressee.join(',') }}
            </span>
          </div>
          <div class="weekCheck-table-td">
            <span class="title-name">
              抄送人：
            </span>
            <span class="title-value">
              {{ addressee.join(',') }}
            </span>
          </div>
        </div>
        <div class="weekCheck-table-tr time-line-box">
          报告时间：
          <span class="time-span">{{ thisWeekData ? thisWeekData.start_time[0] : '' }}</span>年
          <span class="time-span">{{ thisWeekData ? thisWeekData.start_time[1] : '' }}</span>月
          <span class="time-span">{{ thisWeekData ? thisWeekData.start_time[2] : '' }}</span>日 至
          <span class="time-span">{{ thisWeekData ? thisWeekData.end_time[0] : '' }}</span>年
          <span class="time-span">{{ thisWeekData ? thisWeekData.end_time[1] : '' }}</span>月
          <span class="time-span">{{ thisWeekData ? thisWeekData.end_time[2] : '' }}</span>日
        </div>
        <div class="weekCheck-table-tr table-box-body">
          <div class="weekCheck-table-tr-title">
            <span class="question-index">一、</span>
            <div class="question-title">
              <p>本周日管控、周排查等发现问题情况：</p>
              <p>（对照周排查主体责任风险管控清单，存在问题项按序号逐条填报）</p>
            </div>
          </div>
          <div class="weekCheck-table-tr-content">
            <div v-if="thisWeekData">
              <div class="question-body-list" v-for="item in thisWeekData.list" :key="item.id">
                <div class="question-body-list-header">
                  <div class="list-index">
                    【{{ item.number }}】
                  </div>
                  <div class="list-title">
                    {{ item.name }}
                  </div>
                </div>
                <div class="question-body-list-check">
                  不符合说明：{{ item.result }}
                </div>
              </div>
            </div>
          </div>
          <div class="weekCheck-table-tr-title">
            <span class="question-index">二、</span>
            <div class="question-title">
              <p>周排查问题整改情况和措施：</p>
              <p>（根据第一项填报内容逐条对应填报，明确责任人、整改期限及整改完成情况）</p>
            </div>
          </div>
          <div class="weekCheck-table-tr-content">
            <div v-if="thisWeekData">
              <div class="question-body-list" v-for="item in thisWeekData.list" :key="item.id">
                <div class="question-body-list-header">
                  <div class="list-index">
                    {{ item.parents.name }}【{{ item.number }}】
                  </div>
                  <div class="list-title">
                    责任人：{{ item.user ? item.user.realname : '' }}，整改期限：{{
                      item.end_time
                    }}，完成情况：{{ Number(item.status) ? '已整改' : '未整改' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="weekCheck-table-tr-title">
            <span class="question-index">三、</span>
            <div class="question-title">
              <p>上一周食品安全风险隐患问题整改落实情况：</p>
              <p>（根据上周问题内容逐条对应填报，明确责任人、整改期限及整改完成情况）</p>
            </div>
          </div>
          <div class="weekCheck-table-tr-content">
            <div class="question-body-list" v-for="item in tableList" :key="'before'+item.id">
              <div class="question-body-list-header">
                <div class="list-index">
                  【{{ item.number }}】
                </div>
                <div class="list-title">
                  {{ item.name }}
                </div>
              </div>
              <div class="question-body-list-check">
                责任人：{{ item.user ? item.user.realname : '' }}，整改期限：{{ item.end_time }}，完成情况：{{ Number(item.status) ? '已整改' : '未整改' }}
              </div>
            </div>
          </div>
          <div class="weekCheck-table-tr-title">
            <span class="question-index">四、</span>
            <div class="question-title">
              <p>本周食品安全管理情况评价：</p>
            </div>
          </div>
          <div class="footer-box-content">
            <div class="weekCheck-table-tr-content-list">
              <span class="box-i-span">
                  <span class="box-i-span-in" v-if="thisWeekData && Number(thisWeekData.comment_type)==1">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>食品安全风险可控，无较大食品安全风险隐患。
            </div>
            <div class="weekCheck-table-tr-content-list">
              <span class="box-i-span">
                  <span class="box-i-span-in" v-if="thisWeekData && Number(thisWeekData.comment_type)==2">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>存在食品安全风险隐患，需尽快采取防范措施。
            </div>
            <div class="weekCheck-table-tr-content-list">
              <span class="box-i-span">
                  <span class="box-i-span-in" v-if="thisWeekData && Number(thisWeekData.comment_type)==3">
                    <span class="myicon-tick-checked"></span>
                  </span>
                </span>存在严重食品安全风险隐患，需尽快采取防范措施，请主要负责人重视。
            </div>
          </div>
        </div>
        <div class="weekCheck-table-footer">
          <div class="weekCheck-table-footer-l">
            报告人：{{ thisWeekData && thisWeekData.user ? thisWeekData.user.realname : '' }}
          </div>
          <div class="weekCheck-table-footer-r">
            <span>{{ thisWeekData ? thisWeekData.create_time[0] : '' }}</span>年
            <span>{{ thisWeekData ? thisWeekData.create_time[1] : '' }}</span>月
            <span>{{ thisWeekData ? thisWeekData.create_time[2] : '' }}</span>日
          </div>
        </div>
      </div>
    </div>
    <button v-print="'#printMe'" class="btn-print-box">打印</button>
  </div>
</template>

<script>
export default {
  name: "weekPrint",
  data() {
    return {
      tableList: [],
      page1: 4,
      page2: 4,
      checkTime: [],
      schoolName: '',
      thisWeekData: null,
      addressee: [], // 收件人
    }
  },
  methods: {
    getData(option) {
      if (option) {
        if (option.thisweek) {
          let thisWeek_ = JSON.parse(option.thisweek)
          let list = []
          for (let item of thisWeek_.list) {
            if (!Number(item.is_qualified)) {
              list.push(item)
            }
          }
          thisWeek_.list = list
          thisWeek_.start_time = thisWeek_.start_time.split('-')
          thisWeek_.end_time = thisWeek_.end_time.split('-')
          thisWeek_.create_time = thisWeek_.create_time.split(' ')[0].split('-')
          let name_ = []
          for (let item of thisWeek_.list) {
            if (item.user && name_.indexOf(item.user.realname) === -1) {
              name_.push(item.user.realname)
            }
          }
          this.addressee = JSON.parse(JSON.stringify(name_))
          this.thisWeekData = thisWeek_ // 本周检查详情
        }
        if (option.befores) {
          this.tableList = JSON.parse(option.befores) // 本周检查详情
        }
        this.schoolName = option.schoolName
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.print-boxbody {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 40px;
  position: relative;
}

.weekCheck-box {
  background: #fff;
  padding: 30px 20px 20px;
  box-sizing: border-box;
  width: 1075px;
  font-weight: 300;
  font-size: 18px;
  font-family: "宋体";
}

.box-i-span {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #777;
  position: relative;
  margin-left: 3px;
  margin-right: 10px;
}

.box-i-span-in {
  position: absolute;
  top: -6px;
  left: -5px;
}

/**绿色勾*/

.myicon-tick-checked {

  display: inline-block;

  position: relative;

  width: 18px;
  height: 16px;

  border-radius: 50%;

  /*background-color: #2ac845;*/

}


.myicon-tick-checked:before, .myicon-tick-checked:after {

  content: '';

  pointer-events: none;

  position: absolute;

  color: #000;

  border: 2px solid;

  /*background-color: #000;*/

}

.myicon-tick-checked:before {
  width: 0px;
  height: 0px;
  left: 22%;
  top: 65%;
  -webkit-transform: skew(0deg, 50deg);
  transform: skew(0deg, 50deg);

}

.myicon-tick-checked:after {
  width: 7px;
  height: 0px;
  left: 45%;
  top: 42%;
  -webkit-transform: skew(0deg, -50deg);
  transform: skew(0deg, -50deg);

}

.weekCheck-box-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
  font-size: 28px;
}

.weekCheck-box-title span {
  border-bottom: 1px solid #777;
  padding: 0 30px;
}

.weekCheck-box-table {
  border: 1px solid #777;
}

.weekCheck-table-tr {
  border-bottom: 1px solid #777;
}

.header-line-tr {
  display: flex;
  align-items: center;
  height: 58px;
}

.time-line-box {
  height: 58px;
  line-height: 58px;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.weekCheck-table-td {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  height: 58px;
}

.weekCheck-table-td:first-child {
  border-right: 1px solid #777;

}

.title-name {
  display: block;
  width: 75px;
}

.title-value {
  display: block;
  flex: 1;
}


.weekCheck-table-tr .time-span {
  display: block;
  padding: 0 10px;
  text-align: center;
}

.table-box-body {
  padding: 10px;
}

.weekCheck-table-tr-title {
  display: flex;
}

.question-index {
  display: block;
  width: 30px;
}

.question-title {
  flex: 1;
}

.weekCheck-table-tr-content {
  min-height: 280px;
  padding-top: 20px;
  margin-bottom: 20px;
}

.weekCheck-table-tr-content-list {
  display: flex;
  align-items: center;
  padding-left: 30px;
  margin-bottom: 10px;
}

.weekCheck-table-footer {
  display: flex;
  align-items: center;
  height: 60px;
}

.weekCheck-table-footer-l {
  padding-left: 20px;
  flex: 1;
}

.weekCheck-table-footer-r {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.weekCheck-table-footer-r span {
  display: block;
  padding: 0 10px;
  text-align: center;
}

.question-body-list {
  margin-bottom: 10px;
  padding-left: 10px;
}

.question-body-list-header {
  display: flex;
  /*align-items: center;*/
}

.list-title {
  flex: 1;
}

.question-body-list-check {
  padding-left: 30px;
}

.btn-print-box {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
  height: 40px;
  line-height: 40px;
  width: 120px;
  background: #20a0ff;
  box-shadow: 0 2px 2px #005b9f;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  border:none;
}

.footer-box-content {
  /*height: 200px;*/
  padding-top: 10px;
  margin-bottom: 20px;
}
</style>
<!--<div class="weekCheck-table-tr-content">-->
<!--<div class="question-body-list">-->
<!--  <div class="question-body-list-header">-->
<!--    <div class="list-index">-->
<!--      【1】-->
<!--    </div>-->
<!--    <div class="list-title">-->
<!--      按许可项目经营，无超范围经营。许可证载明的许可事项发生变化的，及时向监管部门申请变更-->
<!--    </div>-->
<!--  </div>-->
<!--  <div class="question-body-list-check">-->
<!--    不符合说明：按许可项目经营，无超范围经营。许可证载明的许可事项发生变化的，及时向监管部门申请变更-->
<!--  </div>-->
<!--</div>-->
